<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 样式类名操作：针对css3、添加、移除、切换的元素类名操作
		     添加addClass()      有参：1个参和多个参
			                     语法：addClass("类名");1个
								 <p class="类名">
								 语法：addClass("类名1 类名2");多个
								 <p class="类名1 类名2">
								 功能：匹配元素集合中的所有元素
								      添加一个或者多个类名操作
								 提醒：元素添加存在的样式	  
			 移除removeClass()   功能：匹配元素集合中的所有元素
			                          移除一个或者多个类名操作
			 切换toggleClass()   功能：如果元素有类名移除，没有则添加
			 判断hasClass()      功能：检查匹配元素集合中是否包含指定类名
			                     返回值bool
		 -->
		 <!-- 要求：1.jQ引入
		           2.html：div id="targetElement"
				           4个按钮  id="addClassBtn"
						           id="removeClassBtn"
								   id="toggleClassBtn"
								   id="hasClassBtn"
				           div id="resultArea"
				   3.css：.bgColor{ 300*300 背景色随意}
				          .borders{ 10个像素实线红色边框  倒角}
		 
		 -->
		 <style>
			 .bgColor{
				 width: 300px;
				 height: 300px;
				 background-color: #ffaaff;
			 }
			 .borders{
				 border: 10px solid red;
				 border-radius: 50%;
			 }
		 </style>
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名是否存在</button>
		<div id="resultArea"></div>
		<script>
			//1.点击  添加类 按钮  添加效果【样式】 300*300 背景色红色
			$("#addClassBtn").click(function(){
				//2.div添加样式
				$("#targetElement").addClass("bgColor borders");
				$("#resultArea").html("<h4>添加样式类名：bgColor</h4>");
			});
			$("#removeClassBtn").click(function(){
				$("#targetElement").removeClass("borders");
				$("#resultArea").html("<h4>移除样式类名：borders</h4>");
			});
			$("#toggleClassBtn").click(function(){
				$("#targetElement").toggleClass("borders");
				$("#resultArea").html("<h4>切换样式类名：borders</h4>");
			});
			$("#toggleClassBtn").click(function(){
				$("#targetElement").toggleClass("bgColor");
				$("#resultArea").html("<h4>切换样式类名：borders</h4>");
			});
			//检查类名是否存在：true存在   false不存在
			$("#hasClassBtn").click(function(){
				//div添加样式--存在样式：类名
				var hc=$("#targetElement").hasClass("borders");
				$("#resultArea").html("检查borders是否存在："+hc);
			});
		</script>
	</body>
</html>